<template>
  <div class="tabs-box">
    <div class="tabs-menu">
      <el-tabs v-model="tabsMenuValue" type="card" @tab-click="tabClick" @tab-remove="tabRemove">
        <el-tab-pane v-for="item in tabsMenuList" :key="item.path" :label="item.title" :name="item.path" :closable="item.close">
          <template #label>
            <!-- <el-icon class="tabs-icon" v-show="item.icon && tabsIcon">
              <component :is="item.icon"></component>
            </el-icon> -->
            <i v-show="item.icon && tabsIcon" :class="item.icon" class="iconfont2"> </i>
            {{ item.title }}
          </template>
        </el-tab-pane>
      </el-tabs>
      <MoreButton />
    </div>
  </div>
</template>

<script setup lang="ts">
import Sortable from "sortablejs";
import { ref, computed, watch, watchEffect, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useGlobalStore } from "@/stores/modules/global";
import { useTabsStore } from "@/stores/modules/tabs";
import { useAuthStore } from "@/stores/modules/auth";
import { useDynamicStore } from "@/stores/modules/dynamic";
import { useFondsStore } from "@/stores/modules/fonds";
import { useKeepAliveStore } from "@/stores/modules/keepAlive";
import { TabsPaneContext, TabPaneName } from "element-plus";
import MoreButton from "./components/MoreButton.vue";

const route = useRoute();
const router = useRouter();
const tabStore = useTabsStore();
const authStore = useAuthStore();
const globalStore = useGlobalStore();
const keepAliveStore = useKeepAliveStore();
const dynamicStore = useDynamicStore();
const fondsStore = useFondsStore();

const tabsMenuValue = ref(route.fullPath);
const tabsMenuList = computed(() => tabStore.tabsMenuList);
const tabsIcon = computed(() => globalStore.tabsIcon);

onMounted(() => {
  tabsDrop();
  initTabs();
});

// 监听路由的变化（防止浏览器后退/前进不变化 tabsMenuValue）
watch(
  () => route.fullPath,
  () => {
    if (route.meta.isFull) return;
    tabsMenuValue.value = route.fullPath;
    let tabsParams: any = {};
    // 获取全宗数据
    const fondsData = fondsStore.fondsData.length > 0 ? fondsStore.fondsData : fondsStore.getFondsData;
    // 获取符合当前路由的全宗数据
    const filterData = fondsData.filter((v: any) => v.FMT_ID === route.query.fmtid && v.Archive_Status === route.query.status);
    //判断路由名称是否为test2 （以后替换）
    if (route.name === "MainModal") {
      tabsParams = {
        icon: "icon-menlei", //route.meta.icon as string,
        title: (filterData[0]?.FMT_Name ? filterData[0]?.FMT_Name : route.meta.title) as string,
        path: route.fullPath,
        name: route.name as string,
        close: !route.meta.isAffix
      };
    } else if (route.name === "sublevel") {
      // 判断路由名称是否为sublevel
      // 获取全宗数据
      const fondsData = fondsStore.fondsData.length > 0 ? fondsStore.fondsData : fondsStore.getFondsData;
      // 获取符合当前路由的全宗数据
      const filterData = fondsData.filter((v: any) => v.FMT_ID === route.query.fmtid && v.Archive_Status === route.query.status);
      tabsParams = {
        icon: "icon-file", // route.meta.icon as string,
        title: (filterData[0]?.FMT_Name + "(" + route.query.code + ")"
          ? filterData[0]?.FMT_Name + "(" + route.query.code + ")"
          : route.meta.title) as string,
        path: route.fullPath,
        name: route.name as string,
        close: !route.meta.isAffix
      };
    } else {
      tabsParams = {
        icon: route.meta.icon as string,
        title: route.meta.title as string,
        path: route.fullPath,
        name: route.name as string,
        close: !route.meta.isAffix
      };
    }
    // 添加tab栏
    tabStore.addTabs(tabsParams);
    route.meta.isKeepAlive && keepAliveStore.addKeepAliveName(route.name as string);
  },
  { immediate: true }
);
// 监听主页面子级页面左侧树点击事件
watchEffect(
  () => {
    console.log("@@@@@@@@@@@@@@@@@@@@@@@@@");
    // 获取全宗数据
    const fondsData = fondsStore.fondsData.length > 0 ? fondsStore.fondsData : fondsStore.getFondsData;
    // 获取符合当前路由的全宗数据
    const filterData = fondsData.filter((v: any) => v.FMT_ID === route.query.fmtid && v.Archive_Status === route.query.status);
    // 判断当前路由路径是否包含主页面路径
    if (route.fullPath.includes("dynamicMain")) {
      // 判断左侧树点击事件是否为真
      if (dynamicStore.childLeftClick) {
        const title = (filterData[0]?.FMT_Name ? filterData[0]?.FMT_Name : route.meta.title) as string;
        // 设置tab栏名称
        tabStore.setTabsTitle(title);
      } else if (dynamicStore.noCatalogStatus) {
        const title = (filterData[0]?.FMT_Name ? filterData[0]?.FMT_Name : route.meta.title) as string;
        // 设置tab栏名称
        tabStore.setTabsTitle(title);
      } else {
        const title = route.query.code
          ? filterData[0]?.FMT_Name + "(" + route.query.code + ")"
            ? filterData[0]?.FMT_Name + "(" + route.query.code + ")"
            : route.meta.title
          : filterData[0]?.FMT_Name
          ? filterData[0]?.FMT_Name
          : route.meta.title;
        tabStore.setTabsTitle(title);
      }
    }
  },
  { immediate: true }
);
// tabs 拖拽排序
const tabsDrop = () => {
  Sortable.create(document.querySelector(".el-tabs__nav") as HTMLElement, {
    draggable: ".el-tabs__item",
    animation: 300,
    onEnd({ newIndex, oldIndex }) {
      const tabsList = [...tabStore.tabsMenuList];
      const currRow = tabsList.splice(oldIndex as number, 1)[0];
      tabsList.splice(newIndex as number, 0, currRow);
      tabStore.setTabs(tabsList);
    }
  });
};

// 初始化需要固定的 tabs
const initTabs = () => {
  authStore.newFlatMenuListGet.forEach((item: any) => {
    if (item.meta?.isAffix && !item.meta?.isHide && !item.meta?.isFull) {
      const tabsParams = {
        icon: item.meta.icon,
        title: item.meta.title,
        path: item.path,
        name: item.name,
        close: !item.meta.isAffix
      };
      tabStore.addTabs(tabsParams);
    }
  });
};

// Tab Click
const tabClick = (tabItem: TabsPaneContext) => {
  const fullPath = tabItem.props.name as string;
  router.push(fullPath);
};

// Remove Tab
const tabRemove = (fullPath: TabPaneName) => {
  const name = tabStore.tabsMenuList.filter(item => item.path == fullPath)[0].name || "";
  keepAliveStore.removeKeepAliveName(name);
  tabStore.removeTabs(fullPath as string, fullPath == route.fullPath);
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
